import React from 'react'
import {connect} from 'react-redux'
import {messages} from "share/common";
import {Form, Input, Switch, Button, message, Alert} from 'antd'
import approveSuggestService from 'containers/setting/approve-suggest/approve-suggest.service'
const {TextArea} = Input;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14},
};

class NewApproveSuggest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saveLoading: false
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.slideShow === this.props.slideShow)
      return;
    if (!nextProps.slideShow) {
      this.props.form.resetFields();
      return !1;
    }
  }

  //保存
  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({saveLoading: true});
        let params = {};
        params.status = values.status ? 1000 : 1001;
        params.reply = values.reply;
        params.type = 2002;
        params.code = values.code;
        params.tenantId = this.props.tenant.id;
        approveSuggestService.addReply(params).then(() => {
          this.setState({saveLoading: false});
          this.props.close(true);
        }).catch((e) => {
          if (e.response) {
            message.error(`${messages('common.save.filed')}, ${e.response.data.message}`);
            this.setState({saveLoading: false});
          }
        })
      }
    });
  };

  render() {
    const {saveLoading} = this.state;
    const {getFieldDecorator} = this.props.form;
    const {tenantMode} = this.props;
    return (
      <div>
        <Alert message={messages('setting.key1515')/*启用后的审批意见不能修改，只能禁用后再新建。*/} type="info" showIcon/>
        <Form onSubmit={this.handleSave} style={{marginTop: '10px', fontSize: '14px'}}>
          <FormItem className="priority-wrap"
                    label={messages('common.column.status')/*状态*/} {...formItemLayout}>
            {getFieldDecorator('status', {
              rules: [{
                required: true, message: messages('common.please.input')/*请输入*/,
              }],
              initialValue: true,
              valuePropName: 'checked'
            })(
              <Switch disabled={!tenantMode}/>
            )}
          </FormItem>
          <FormItem className="priority-wrap"
                    label={messages('setting.key1224')/*编码*/} {...formItemLayout}>
            {getFieldDecorator('code', {
              rules: [{
                required: true, message: messages('common.please.input')/*请输入*/,
              }],
            })(
              <Input disabled={!tenantMode}/>
            )}
          </FormItem>
          <FormItem className="priority-wrap"
                    label={messages('setting.key1378')/*审批意见*/} {...formItemLayout}>
            {getFieldDecorator('reply', {
              rules: [{
                required: true, message: messages('common.please.input')/*请输入*/,
              }, {
                max: 500,
                message: messages('setting.key1516')/*审批意见最多不超过500个字符*/
              }],
            })(
              <TextArea disabled={!tenantMode} placeholder={ messages('common.please.input')/*请输入*/}
                        style={{height: '150px'}}/>
            )}
          </FormItem>
        </Form>
        {tenantMode && <div className="footer-operate" style={{backgroundColor: '#ffffff', left: '0px'}}>
          <Button type="primary" onClick={this.handleSave} style={{margin: '0px 10px'}}
                  loading={saveLoading}>{messages('common.save')/*保存*/}</Button>
          <Button onClick={this.props.close}>{messages('common.cancel')/*取消*/}</Button>
        </div>}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    tenantMode: state.main.tenantMode,
  }
}
const wrappedNewApproveSuggest = Form.create()(NewApproveSuggest);
export default connect(mapStateToProps)(wrappedNewApproveSuggest);
